﻿<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<LINK rel="Bookmark" href="../images/favicon.ico">
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/jquery-2.1.4.min.js"></script>
<link
	href=" ${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css"
	rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="${path }/resource/css/index.min.css" />

<script type="text/javascript"
	src="${path }/resource/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path}/resource/plugin/layer/layer.js"></script>
<script type="text/javascript"
	src="${path}/resource/js/systools/AjaxProxy.js"></script>
<script type="text/javascript" src="${path}/resource/js/systools/MUI.js"></script>

<style type="text/css">
#parentId  option {
	line-height: 30px;
	padding: 5px 10px;
	cursor: pointer;
}
.item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 20px 0;
    padding: 20px 0;
    border-bottom: 1px solid #DDDDDD;
}

#parentId  option:HOVER {
	background: #0168B7;
	color: #fff;
	border-radius: 5px;
}
#appBox2{
	padding-bottom: 50px;

}
.app {
	margin-top: 20px;
}

.part2 .item {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin: 20px 0;
	padding: 20px 0;
	border-bottom: 1px solid #DDDDDD;
}

.time {
	-webkit-box-flex: 0 0 160px;
	-webkit-flex: 0 0 160px;
	-ms-flex: 0 0 160px;
	flex: 0 0 160px;
	width: 160px;
	height: 90px;
	text-align: center;
	font-size: 16px;
	color: #666;
	line-height: 16px;
	border-right: 1px solid #eee;
	margin-top: 8px;
	float: left;
}

.con {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	padding: 0 20px;
	float: left;
}

.con h2 {
	display: block;
	font-size: 18px;
	color: #666;
	line-height: 36px;
	height: 36px;
	margin-bottom: 10px;
	margin: 0;
}

.time span {
	font-size: 30px;
	display: block;
	line-height: 60px;
	margin-bottom: 5px;
	color:#f70505
}

.con p {
	margin: 0;
	font-size: 16px;
	color: #666;
	line-height: 30px;
	height: 60px;
	overflow: hidden;
	text-align: justify;
}
</style>
<title>GeeK开发者中心</title>
</head>
<body>
	<%@ include file="top.jsp"%>
	<div class="container" style="margin-top: 100px">
		<div class="row">
			<div class="col-sm-3">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">知识分类</h3>
					</div>
					<div class="panel-body" id="parentId"></div>
				</div>
			</div>
			<div class="col-sm-9">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">主题列表</h3>
					</div>
					<div class="panel-body" id="appBox2">
						

					</div>
					<div id="pagingBox" style="  margin: 40px 100px;" class="btn-group" role="group"></div>
				</div>
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">
	$(".index-nav").addClass("nav-hover");
	initFunctionList();
	function initFunctionList() {
		$.AjaxProxy().invoke("${path}/admin/articleType/all", function(loj) {
			$("#parentId").createSelectTree(loj.attr("result").rows, {
				append : false,
				value : "articleTypeName",
			});
			bundingEv();
		});
		loadArt();
		
	}
	function bundingEv(){
		$("#parentId").find("option").click(function(){
			loadArt($(this).val());
		});
	}
	
	function loadArt(id,pageNow) {
		var offset=pageNow;
		var limit=10;
		if(id){
			id="&typeId="+id;
		}else{
			id="";
		}
		if(offset){
			offset="&offset="+(offset*limit);
		}else{
			offset="";
		}
		
		$.AjaxProxy().invoke("${path}/arInterface/ar?limit="+limit+id+offset, function(loj) {
				var html='';
				$("#appBox2").html(html);
			for (var i = 0; i < loj.getRowCount(); i++) {
				
				var author=loj.getString(i,'articleAuthor');
				author=author.substring(author.length-1,author.length);
				html+=	'<div class="item"  ><div class="time"><span>'+author+'</span> '+loj.getDate(i,'createtiem')+'</div> <div class="con"> <h2> <a href="${path}/visitor/documentCenter?id='+loj.getString(i,'id')+'" target="blank">'
						+loj.getString(i,'title')+'</a>'
				+'</h2><p><a href="${path}/visitor/documentCenter?id='+loj.getString(i,'id')+'" target="blank">'+loj.getString(i,'articleAbstract')+'</a></p></div></div>'
			}
			$("#appBox2").append(html);
			var rowCount=loj.getValue("total");
			if(rowCount%limit==0){
				pageCount=parseInt(rowCount/limit);
			}else{
				pageCount=parseInt(rowCount/limit)+1;
			}
			
			var fy="";
			$("#pagingBox").html(fy);
			for(var i=1;i<=pageCount;i++){
				if(id){
					fy+='<button type="button" onclick="loadArt('+id+','+(i-1)+')" class="btn btn-default">'+i+'</button>';
				}else{
					fy+='<button type="button" onclick="loadArt('+false+','+(i-1)+')" class="btn btn-default">'+i+'</button>';
				}
			}
			$("#pagingBox").append(fy+"当前第"+(pageNow?pageNow+1:1)+"页");
		
		
		});
	}
</script>
</html>